<template>
  <div>
    <el-dialog title="如何野外生存" :visible.sync="videoflg" width="65%" :close-on-click-modal='false' :close-on-press-escape='false'
               :destroy-on-close='true' :close='videoEndTime' @opened="videoStart(mp4StartTime)">
      <video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"></video-player>
      <span slot="footer" class="dialog-footer">
        <el-button @click="videoflg = false">取 消</el-button>
        <el-button type="primary" @click="videoflg = false" :loading="videoLoad">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import { RolePermissionsQX } from '../../../../api/index';
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
export default {
  data() {
    return {
      videoflg: false,
      videoLoad: false,
      mp4url: '',
      mp4StartTime: 0,
      fileType: 'mp4',
    }
  },
  components: {
    videoPlayer
  },
  computed: {
    playerOptions() {
      const playerOptionsObj = {
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        autoplay: false,
        muted: false,
        loop: false,
        language: 'zh-CN',
        fluid: true,
        sources: [{
          type: 'video/' + this.fileType,
          src: this.mp4url
        }],
        poster: '',//视频封面
        notSupportedMessage: '此视频暂无法播放...',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true
        }
      }
      return playerOptionsObj
    }
  },
  methods: {
    //继续上次播放位置
    videoStart(num) {
      let videoPlay = document.getElementsByClassName('vjs-tech')[0];
      videoPlay.currentTime = num //设置开始播放位置 s
    },
    //关闭之前记录播放位置
    videoEndTime() {
      let videoPlay = document.getElementsByClassName('vjs-tech')[0];
      console.log(parseInt(videoPlay.currentTime)) //当前播放位置 s
      console.log(parseInt(videoPlay.duration)) //总时长 s
    }
  },
  mounted() {

  }
}
</script>
<style scoped>
.video {
    width: 100%;
    height: 100%;
}
.video .vjs-poster {
    transform: scale(2);
}
.video .vjs-tech {
    transform: scale(2);
}
.video .video-js .vjs-big-play-button {
    width: 80px;
    height: 100%;
    border-radius: 1em;
}
</style>